<template>
  <div class="radiodetail">
    <div class="header padding-24 space-between" id="head" :class="{bgp:bg}">
      <div class="h-back" @click="goBack">
        <img :src="back" alt />
      </div>
      <div class="title color-f">{{title}}</div>
      <div class="h-share">
        <img :src="share" alt @click="toShare" />
      </div>
      <div class="h-right">
        <img :src="play" alt />
      </div>
    </div>
    <div class="singerinfo">
      <div class="space-between padding-24">
        <div class="left flex-column">
          <p class="color-f fs-38">{{radioinfo.radio_name}}</p>
          <p class="fs-26 color-f">{{radioinfo.subscription_number}}人订阅</p>
        </div>
        <div
          class="right bg-p center color-f"
          v-if="radioinfo.is_subscription==0"
          @click="subscription"
        >订阅</div>
        <div class="right bg-f5 center" v-else @click="subscription">已订阅</div>
      </div>
      <img :src="radioinfo.radio_cover||bgs" alt class="bg" />
      <div class="bleck"></div>
    </div>
    <div class="tab-nav bg-f space-around">
      <div class="fs-32 center-col" :class="{current:cur==1}" @click="select(1)">详情</div>
      <div class="fs-32 center-col" :class="{current:cur==2}" @click="select(2)">
        节目
        <span class="fs-26">{{total}}</span>
      </div>
    </div>
    <div class="detail bg-f padding-24" v-if="cur==1">
      <div class="userinfo">
        <p class="title fs-32">个人信息</p>
        <div class="content center-col">
          <div class="left">
            <img :src="radioinfo.user_info.user_avator" alt class="cove" />
            <!-- <span class="point bg-r" v-if="item.news==true"></span> -->
            <div class="loge" v-if="userinfo.is_singer==1||userinfo.isvip==1">
              <img :src="musicer" alt v-if="userinfo.is_singer==1" />
              <img :src="vip" alt v-if="userinfo.isvip==1&&userinfo.is_singer==2" />
            </div>
          </div>
          <div class="right flex-column">
            <p class="fs-32">{{radioinfo.user_info.nickname}}</p>
            <p class="fs-24 color-9">{{userinfo.job}}</p>
          </div>
        </div>
      </div>
      <div class="radiocntent">
        <p class="title fs-32">电台内容介绍</p>
        <div class="type center-col">
          <p class="color-6">分类：</p>
          <div class="types center-col wrap">
            <span class="fs-24">{{radioinfo.radio_cate}}</span>
            <!-- <span class="fs-24" v-for="(item,index) in type" :key="index">{{radioinfo.radio_cate}}</span> -->
          </div>
        </div>
        <div class="content" v-html="radioinfo.radio_desc"></div>
      </div>
      <div class="comment">
        <p class="title fs-32">精彩评论</p>
        <div class="list" v-if="commentlist[0]">
          <div class="list-item" v-for="(item,index) in commentlist" :key="index">
            <div class="top center-col">
              <img :src="item.user_avator" alt class="yuan" />
              <p class="color-6">{{item.nickname}}</p>
            </div>
            <div class="content center-col">
              <div class="left"></div>
              <div class="right">
                <p class="fs-32">{{item.content}}</p>
                <p class="fs-26 color-9 overFlow">——{{item.created_at}}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="center" v-else>暂无评论</div>
      </div>
    </div>
    <div class="show-list bg-f padding-24" v-if="cur==2">
      <div class="top space-between">
        <p class>共{{userinfo.num}}首</p>
        <div class="center-col">
          <img :src="set" alt />
          <p>批量操作</p>
        </div>
      </div>
      <div class="list">
        <div class="list-item space-between" v-for="(item,index) in musiclist" :key="index">
          <p class="fs-32 color-9">{{index+1}}</p>
          <div class="right space-between">
            <div class="flex-column">
              <p class="fs-32 overFlow">{{item.musicname}}</p>
              <div class="bo center-col">
                <p class="color-9 fs-24">{{item.date}}</p>
                <div class="times center-col">
                  <img :src="plays" alt />
                  <p class="color-9 fs-24">{{item.playnum}}</p>
                </div>
                <div class="times center-col">
                  <img :src="time" alt />
                  <p class="color-9 fs-24">{{item.time}}</p>
                </div>
              </div>
            </div>
            <img :src="more" alt class="more" />
          </div>
        </div>
      </div>
    </div>
    <shareModel v-show="leaderModal" @fn="getShareModel" :leaderModal="leaderModal"></shareModel>
  </div>
</template>
<script>
export default {
  data() {
    return {
      leaderModal: false, //控制微信内分享模态框
      name: "",
      title: "电台",
      bg: false,
      read: false,
      cur: 1,
      total: 55,
      userinfo: {
        name: "哆啦A梦",
        is_singer: 1,
        isvip: 1,
        job: "美食家、主持人",
        num: 50
      },
      back: require("../../assets/index/back.png"),
      play: require("../../assets/index/play.png"),
      share: require("../../assets/index/toshare.png"),
      bgs: require("../../assets/account/singerbg.png"),
      cove: require("../../assets/image/cove.png"),
      musicer: require("../../assets/account/musicer.png"),
      vip: require("../../assets/account/vip.png"),
      set: require("../../assets/index/operate.png"),
      more: require("../../assets/index/more.png"),
      plays: require("../../assets/index/play-operation.png"),
      time: require("../../assets/index/time.png"),
      // type:['情感调频','情感调频','情感调频'],
      // content:'<p>adGV付电话费给你发个呗你给的半年报个回复你的你福建科副教授法国人烦恼点击个回复即可放假随叫随到女方</p><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2957067119,506787054&fm=26&gp=0.jpg" alt=""><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2322762439,2597220162&fm=26&gp=0.jpg" alt="">',
      commentlist: [
        {
          img: require("../../assets/image/cove.png"),
          name: "阿巴西多",
          text:
            "麦尔鼓手节8小接Solo简介，麦尔鼓手节8小Solo简介，麦尔鼓手节小介。",
          songnemr: "哈哈哈的举动就是点击放假比较"
        },
        {
          img: require("../../assets/image/cove.png"),
          name: "阿巴西多",
          text:
            "麦尔鼓手节8小接Solo简介，麦尔鼓手节8小Solo简介，麦尔鼓手节小介。",
          songnemr: "哈哈哈的举动就是点击放假比较收到花烦恼发给你不过"
        }
      ],
      musiclist: [
        {
          musicname:
            "付电话费给你发个呗你给的半年报个回复你的你福建科副教授法国人烦恼点击个回",
          date: "04-28",
          playnum: 88,
          time: "15:36"
        },
        {
          musicname:
            "付电话费给你发个呗你给的半年报个回复你的你福建科副教授法国人烦恼点击个回",
          date: "04-28",
          playnum: 88,
          time: "15:36"
        }
      ],
      radioinfo: {
        user_info: ""
      }
    };
  },
  created() {
    this.name = this.$route.query.type;
    this.getradiodetail();
    this.getradiocomments();
  },
  mounted() {
    window.addEventListener("scroll", this.onScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.onScroll);
  },
  methods: {
    // 去分享
    toShare() {
      console.log(this.radioinfo, "---this.radioinfo");
      this.is_weixn();
      // 记录进入app时的url
      if (typeof window.entryUrl === "undefined" || window.entryUrl === "") {
        window.entryUrl = location.href.split("#")[0];
      }
      if (this.isapp == 0) {
        this.wxshare.getWxmessage(
          this.radioinfo.radio_name,
          this.radioinfo.radio_cate,
          /(Android)/i.test(navigator.userAgent)
            ? location.href.split("#")[0]
            : window.entryUrl,
          this.radioinfo.radio_cover,
          location.href
        );
      } else if (this.isapp == 1) {
        var sendData = {
          type: "1",
          data: {
            title: this.radioinfo.radio_name,
            description:this.radioinfo.radio_cate,
            shareimg: this.radioinfo.radio_cover,
            share_url: location.href
          }
        };
        window.postMessage(JSON.stringify(sendData));
      }
    },
    // 判断是否在微信中打开
    is_weixn() {
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        // 表示在微信里面
        this.leaderModal = true;
        return true;
      } else {
        return false;
      }
    },
    // 获取分享模态框传过来的status
    getShareModel(e) {
      this.leaderModal = e;
    },
    getradiodetail() {
      let url = this.$host1 + `home/radio/radioInfo`;
      this.$axios
        .get(url, {
          params: {
            radio_id: this.name
          }
        })
        .then(res => {
          console.log(res);
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              this.radioinfo = resData.data;
            } else {
              this.AlertWin(resData.message);
            }
          }
        })
        .catch(() => {
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    getradiocomments() {
      let url = this.$host1 + `home/radio/radioAndProgramComment`;
      this.$axios
        .get(url, {
          params: {
            radio_id: this.name
          }
        })
        .then(res => {
          console.log(res);
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              this.commentlist = resData.data;
            } else {
              this.commentlist = [];
              this.AlertWin(resData.message);
            }
          }
        })
        .catch(() => {
          this.commentlist = [];
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    subscription() {
      let url = this.$host1 + `home/radio/radioSubscription`;
      var data = {
        radio_id: this.radioinfo.id
      };
      this.$axios
        .post(url, data)
        .then(res => {
          //console.log(res)
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              this.getradiodetail();
              this.AlertWin(resData.message);
            } else {
              this.AlertWin(resData.message);
            }
          }
        })
        .catch(() => {
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    goBack() {
      this.$router.go(-1);
    },
    select(i) {
      this.cur = i;
    },
    onScroll() {
      //可滚动容器的高度
      let innerHeight = document.querySelector("#head").clientHeight;
      //屏幕尺寸高度
      let outerHeight = document.documentElement.clientHeight;
      //可滚动容器超出当前窗口显示范围的高度
      let scrollTop =
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        window.pageYOffset;
      //scrollTop在页面为滚动时为0，开始滚动后，慢慢增加，滚动到页面底部时，出现innerHeight < (outerHeight + scrollTop)的情况，严格来讲，是接近底部。
      //console.log(innerHeight + " " + outerHeight + " " + scrollTop);
      if (scrollTop <= 165) {
        //加载更多操作
        //console.log("loadmore");
        this.bg = false;
      } else {
        this.bg = true;
        //this.common.AlertWin('没有更多数据啦！')
      }
    }
  }
};
</script>
<style lang="scss">
.radiodetail {
  .header {
    width: 100%;
    height: 1rem;
    background: none;
    .h-back {
      width: 0.15rem;
      height: 0.26rem;
      img {
        width: 100%;
      }
    }
    .title {
      font-size: 0.36rem;
      font-weight: bold;
    }
    .h-right {
      width: 0.38rem;
      height: 0.5rem;
      img {
        display: inline-block;
        width: 100%;
      }
    }
    .h-share {
      position: absolute;
      right: 1rem;
      width: 0.4rem;
      height: 0.43rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .bgp {
    background: linear-gradient(to right, #680dae, #9529c6);
  }
  .singerinfo {
    overflow: hidden;
    position: relative;
    padding-top: 0.001rem;
    //margin-top: 1rem;
    height: 4.3rem;
    .bg {
      width: 100%;
      height: 100%;
      z-index: -1;
      left: 0;
      top: 0;
      position: absolute;
      object-fit: cover;
      //opacity: 0.6;
      //filter: blur(0.5rem);
    }
    .bleck {
      width: 150%;
      height: 150%;
      z-index: -1;
      left: 0;
      top: 0;
      position: absolute;
      //object-fit: cover;
      background-color: rgba(0, 0, 0, 0.3);
    }
    .space-between {
      height: 1rem;
      position: absolute;
      bottom: 0.3rem;
      width: 100%;
      //background-color: greenyellow;
      .left {
        height: 100%;
      }
      .right {
        width: 1.4rem;
        height: 0.6rem;
        border-radius: 0.3rem;
      }
    }
  }
  .tab-nav {
    height: 1rem;
    border-bottom: 0.01rem solid #e9e9e9;
    div {
      //background-color: greenyellow;
      height: 100%;
      position: relative;
      span {
        margin-left: 0.1rem;
      }
    }
    .current {
      color: #7408b4;
      font-size: 0.36rem;
    }
    .current::after {
      content: "";
      width: 0.6rem;
      height: 0.05rem;
      position: absolute;
      bottom: 0;
      left: 50%;
      border-radius: 0.2rem;
      margin-left: -0.3rem;
      background-color: #7408b4;
    }
  }
  .detail {
    width: 100%;
    height: auto;
    padding-top: 0.001rem;
    .title {
      margin-top: 0.2rem;
      height: 1rem;
      line-height: 1rem;
      font-weight: 800;
    }
    .userinfo {
      .content {
        width: 100%;
        height: 1.4rem;
        .left {
          width: 1rem;
          height: 1rem;
          position: relative;
          margin-right: 0.3rem;
          .cove {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
          }
          .point {
            width: 0.16rem;
            height: 0.16rem;
            position: absolute;
            border-radius: 50%;
            right: 0;
            top: 0;
          }
          .loge {
            width: 0.32rem;
            height: 0.32rem;
            position: absolute;
            border-radius: 50%;
            bottom: 0;
            right: 0;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .right {
          height: 0.9rem;
        }
      }
    }
    .radiocntent {
      .type {
        position: relative;
        .color-6 {
          position: absolute;
          top: 0;
          width: 1rem;
          //background-color: greenyellow
        }
        .types {
          margin-left: 1rem;
          span {
            color: #7408b4;
            width: auto;
            height: 0.35rem;
            padding: 0 0.1rem;
            box-sizing: border-box;
            border: 0.01rem solid #7408b4;
            border-radius: 0.08rem;
            margin-right: 0.2rem;
            margin-bottom: 0.1rem;
          }
        }
      }
      .content {
        p {
          margin-top: 0.1rem;
          color: #666;
          line-height: 0.5rem;
        }
        img {
          width: 100%;
          height: auto;
          margin-top: 0.2rem;
          //object-fit: cover;
        }
      }
    }
    .comment {
      .list {
        .list-item {
          height: auto;
          .top {
            height: 1rem;
            width: 100%;
            img {
              width: 0.8rem;
              height: 0.8rem;
              margin-right: 0.2rem;
            }
          }
          .content {
            width: 100%;
            height: auto;
            .left {
              width: 0.8rem;
              height: auto;
              margin-right: 0.2rem;
            }
            .right {
              //background-color: greenyellow;
              width: calc(100% - 1rem);
              height: auto;
              .overFlow {
                height: 1rem;
                line-height: 1rem;
              }
            }
          }
        }
      }
      .center {
        height: 2rem;
      }
    }
  }
  .show-list {
    width: 100%;
    height: auto;
    padding-top: 0.001rem;
    .top {
      height: 1rem;
      .center-col {
        img {
          width: 0.28rem;
          height: 0.3rem;
          margin-right: 0.1rem;
        }
      }
    }
    .list {
      height: auto;
      .list-item {
        height: 1.5rem;
        border-bottom: 0.01rem solid #e9e9e9;
        .right {
          width: calc(100% - 0.8rem);
          height: 100%;
          .flex-column {
            height: 1rem;
            width: 5.5rem;
            .bo {
              .times {
                margin-left: 0.5rem;
                img {
                  width: 0.22rem;
                  height: 0.22rem;
                  margin-right: 0.1rem;
                }
              }
            }
          }
          .more {
            width: 0.1rem;
            height: 0.4rem;
          }
        }
      }
      .list-item:last-child {
        border-bottom: none;
      }
    }
  }
}
</style>